<!-- 打印机 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		
		<view class="look-bot" @click="isLook=true">查看已适配蓝牙型号</view>
		<!-- 打印设置 -->
		<u-popup class="u-pop" :show="show" :round="6" mode="center" :closeOnClickOverlay="false">
			<view class="popup-view">
				<view class="title p-b-10">
					打印机设置
				</view>
				<view class="cell-item">
					<view class="value-view flex">
						<u--input
						    border="surround"
							placeholder="名称"
						  ></u--input>
					</view>
				</view>
				<view class="cell-item">
					<view class="value-view flex">
						<u--input
						    border="surround"
							placeholder="IP"
						  ></u--input>
					</view>
				</view>
				<view class="cell-item">
					<view class="value-view flex">
						<u--input
						    border="surround"
							placeholder="端口"
						  ></u--input>
					</view>
				</view>
				<view class="cell-item">
					<view class="value-view flex">
						<u--input
						    border="surround"
							placeholder="打印机"
						  ></u--input>
					</view>
				</view>
				<view class="cell-item">
					<view class="value-view flex">
						<view class="flex">
							<u-switch size="18"></u-switch>
							<text class="p-l-10">默认</text>
						</view>
					</view>
				</view>
				<view class="bot-view flex flex-sa">
					<view class="btn" @click="() => { show = false }">
						取消
					</view>
					<view class="btn" @click="onSaveCancel(true)">
						保存
					</view>
				</view>
			</view>
		</u-popup>
		
		
		<!-- 查看适配蓝牙型号 -->
		<u-popup class="u-pop" :show="isLook" :round="6" mode="bottom" @close="close">
			<view class="popup-view" style="width: 100%;">
				<view class="title p-b-10">
					已适配蓝牙打印机
				</view>
				<view class="p_list">
					<view class="p_item">汉印HM-A300S</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'SalesReport',
		data() {
			return {
				config: {
					title: "打印机",
					color: "#ffffff",
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
					// backTabPage: '/pages/application/index'
					backTabPage: '',
					backPage: '',
					rightButton: [
					  {
					    key: "btn1",
					    icon: "&#xe727;",
					    position: "left",
					  },
					  {
					    key: "btn2",
					    icon: "&#xe727;",
					    position: "left",
					  }
					],
				},
				show: false,
				isLook: false
			}
		},
		methods: {
			clickBtn(item) {
			  if (item.key === "btn1") {
				  uni.showModal({
				  	title: '提醒',
					content: '该功能需要开启APP定位权限及系统定位服务，用户提供准确的定位及蓝牙打印服务',
					showCancel: false,
					confirmText: '我知道了',
					confirmColor: '#3cc51f'
				  })
			  } else {
				  this.show = true;
			  }
			},
			close() {
				this.isLook = false
			},
			onSaveCancel(show) {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.p_list {
		padding: 0 0 40rpx;
		.p_item {
			font-size: 24rpx;
			padding: 20rpx;
		}
	}
	.cell-item {
		display: flex;
		height: 80rpx;
		align-items: center;
		font-size: 30rpx;
		margin-bottom: 26rpx;
		.label {
			width: 100rpx;
			text-align: right;
			color: #333;
		}
		.value-view {
			padding-left: 60rpx;
			padding-right: 60rpx;
			flex: 1;
			justify-content: space-between;
		}
	}
	.look-bot {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		height: 80rpx;
		align-items: center;
		z-index: 1;
	}
</style>